<template>
	<view :class="{prent:!centerData.length}">
		<!-- 主体 -->
		<view class="box" v-if="centerData.length">
			<!--大循环 -->
			<view class="item" v-for="x,index in centerData" :key="index">
				<!-- 头部标题 -->
				<view class="item-title pding-title" v-if="x.meta.title === '运营管理'">
					<span class="block-color"></span>
					<span class="block-prent">{{x.meta.title}}</span>
				</view>
				<!-- 中间的主体 -->
				<view class="item-center pb-20 pl-20" v-if="x.meta.title === '运营管理'">
					<!-- 小循环 -->
					<view class="item-center-img-title" v-for="j,i in x.children" :key="i" @click="gotoUrl(j)" v-if="j.meta.title === '物资出库'">
						<image :src="`https://pc.chinaonebuild.com/images/workspace/${(j.meta.icon)}.png`" mode="" class="item-center-img"></image>
						<view class="item-center-title">
							{{j.meta.title}}
						</view>
					</view>
				</view>
				<!-- <view class="space" v-if="index!==centerData.length-1"/> -->
			</view>
		</view>
		<!-- 没数据的时候 -->
		<view class="NoData" v-else>
			<image src="https://pc.chinaonebuild.com/images/public/Frame89.png" mode="" class="img"></image>
			<view class="node-title">您暂无权限使用更多功能</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 下拉框的数据
				selectData: [],
				//主体数据
				centerData: [],
				// 是否展开
				expanded: [],
				// 图标状态
				stata: true,
				// 选中的值
				title: '请选择',
				// 选中的索引
				clickIndex: 0,
			}
		},
		onLoad() {
			// this.getData()
		},
		onShow() {
			this.centerData = uni.getStorageSync('menu') || []
		},
		methods: {
			// 跳转页面
			gotoUrl(data) {
				// console.log(data.component,'data.component');
				uni.navigateTo({
					url: `/pagesIndex/${data.component}`
				})
				/* uni.navigateTo({
					url: data.component
				}) */
			},
			// 过滤主体数据
/* 			filterData({
				children
			}) {
				this.centerData = children || []
			},
			// 获取数据
			getData() {
				this.$http.workbench.applicationType().then(({
					data
				}) => {
					this.selectData = data
					this.filterData(data[this.clickIndex])
					this.title = data[this.clickIndex].meta.title
				})
			}, */
			// 根据返回的的值来显示图标
			/* getCommonfunIcon(icon) {
				return require(`@/static/workspace/${icon}.png`)
			}, */
			// 点击的元素 v点击的索引
			/* clickTilt(v, title) {
				this.expanded = ['']
				this.stata = true
				this.title = title
				this.clickIndex = v
				this.filterData(this.selectData[v])
				this.$nextTick(() => {
					this.$refs.collapse.init()
				})
			} */
		}
	}
</script>

<style>
page {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
// 去掉页面滚动条
::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
</style>

<style scoped lang="scss">
	.prent {
		height: 100%;
		background-color: #fff;
	}

	.NoData {
		text-align: center;
		box-sizing: border-box;
		padding-top: 193rpx;
		height: 100%;
		width: 100%;

		.img {
			width: 360rpx;
			height: 360rpx;
		}

		.node-title {
			color: #303133;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 36rpx;
		}
	}

	.box {
		// padding-bottom: 114rpx;
		background-color: #fff;
		.item {
			width: 750rpx;
			// padding: 30rpx;
			box-sizing: border-box;
			background-color: #FFF;
			margin-bottom: 20rpx;

			.item-center {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				margin-top: 28rpx;
				box-sizing: border-box;

				.item-center-img-title {
					text-align: center;
					width: 140rpx;
					margin: 14rpx 17rpx;
					.item-center-img {
						width: 88rpx;
						height: 88rpx;
					}

					.item-center-title {
						color: #303133;
						font-weight: 400;
						font-size: 24rpx;
						line-height: 34rpx;
						width: 180rpx;
						position: relative;
						overflow: hidden;
						left: -10px;
						height: 34rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						// @include white-space1(100rpx);
					}
				}
			}

			.item-title {
				display: flex;
				align-items: center;

				.block-color {
					width: 8rpx;
					height: 36rpx;
					display: inline-block;
					background-color: #2289FF;
				}

				.block-prent {
					margin-left: 12rpx;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
				}
			}
		}
	}


	.clickTilt {
		background-color: rgba(34, 137, 255, 0.1);
		;
		border-radius: 18rpx;
	}

	.texts {
		padding: 20rpx;
		text-align: center;
		// background-color: #FFF;
	}

	.texts:hover {
		background-color: #CCCCCC;
		border-radius: 18rpx;
	}

	::v-deep .u-cell__body {
		background-color: #F2F6FC;
		margin-top: -1rpx;
	}

	::v-deep .content-class {
		background-color: #FFF;
		border-radius: 8rpx;
	}

	.titles {
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			margin-right: 10rpx;
		}
	}

	.fexd {
		// position: fixed;
		// top: 88rpx;
		// width: 100%;
		// z-index: 99;
	}
	.space {
		@include center-space()
	}
	.pding-title{
		padding: 28rpx 30rpx 0 30rpx;
	}
</style>
